<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'/>
    <link href='fullcalendar/core/main.css' rel='stylesheet' />
    <link href='fullcalendar/daygrid/main.css' rel='stylesheet'/>
    <script src='fullcalendar/core/main.js'></script>
    <script src='fullcalendar/daygrid/main.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'dayGrid' ],
                events: {
                        url:'calendar',
                        startParam:"begin",
                        method:"get",
                        color:"white",
                        textColor:"green"
                    }
            });
            calendar.render();
        });
    </script>
</head>
<body>
<div><span style="color: red">红色考勤异常</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: green">绿色考勤正常</span></div>
<div id='calendar'></div>
</body>
</html>